const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: './src/index.js',                //入口的文件路径
    output: {
        path: path.join(__dirname, 'dist'), //设置出口的文件路径
        filename: 'exit.js'                 //出口的文件名
    },
    //复制一份HTML
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' //复制的HTML源文件
        })
    ],
    module: {
        rules: [
            {//处理css文件
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            {//处理less文件
                test: /\.less$/i,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            //处理图片文件
            {/**
                图片注意点：
                1、小于8kb的图片会使用base64字符串保存到js文件中
                2、大于8kb的图片直接复制图片过去
                base64的优点：减少和服务器的交互，直接读取速度更快
                缺点：base64保存会导致文件大小增加30%左右
                */
                test: /\.(png|jpeg|jpg|gif)/i,
                type: 'asset'
            },
            //处理字体图标
            {
                test: /\.(eot|svg|ttf|woff|woof2)/i,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name].[hash:6][ext]'
                }
            },
            //高版本js降级
            {
                test: /\.js$/i,
                exclude: /(node_modules)/,   //排除node_modules文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    devServer: {
        port: 8848,     //修改端口
        open: true      //运行服务器自动打开网页
    }
}